mixin

官網：混入、mixins
參考：Summer。桑莫。夏天 Vue.js: Mixins
跟sass/scss中的mixin就不那麼類似了(sass/scss中的mixin使用在需要相同屬性但屬性值不同的情況)，它與昨天提到的extend很相似，不過extend是用同一份組件，mixin可以多個混用

var mixinName1 = {
  template: '#example-template',
  methods: {
    staements
  },
}

var mixinName2 = {
  statements
}

Vue.component('example', {
  statements
  mixins: [mixinName1, mixinName2],
});

要注意mixins: 的值是陣列喔！

directive

稱為自定義屬性/自定义指令，例如像v-model是內建屬性
官網：自定义指令
官網給了一個範例：網頁載入會自動聚焦輸入框，以下將官方程式碼繁字化

// 宣告全域屬性 'v-focus'
Vue.directive('focus', {
  // 當被綁定的元素插入(用inserted鉤子)到 DOM 中時
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

inserted被稱做鉤子函數，稍後再提到
宣告完就可以使用v-focus了：

<input v-focus>

也可以使用區域宣告，在組件中：

directives: {
  // 屬性名稱 'focus'
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}

鉤子

官網：钩子函数
什麼是鉤子函數？參考解答：美女店員的範例 简书 百里登疯 JavaScript：理解事件、事件处理函数、钩子函数、回调函数
而鉤子函數有自己專屬的參數，官網下方有說明。

小結

鉤子函數及其參數看到頭昏腦脹、吸收不良，還是請各位讀者實際多做操作較能體會箇中奧妙，多看多寫多見見世面，祝各位週末假期愉快～